<template>
	<!--表格单选-->
	<el-row class="goodsAttribute">
  		<el-col :span="24">
  			<!--查询过滤条件-->
  			<el-form :inline="true" :model="conditionForm" ref="conditionForm" label-width="82px">
  				<el-form-item label="名称">				
					<m-input-auto-comp :inputData="conditionForm" :queryInterUrl="urlPaths.goodsQueryList" queryParamName="goodsName"/>
				</el-form-item>
				<el-button type="primary" size="small" icon="search" @click="queryTableData">查询</el-button>
			</el-form>
  		</el-col>
  		<el-col :span="24">
  			<!--表格数据展示-->
  			<div>
	  			<el-button type="primary" size="small" icon="plus" v-on:click="addFn">新增</el-button>
	  			<el-button type="primary" size="small" icon="edit" v-on:click="editFn">修改</el-button>
	  			<el-button type="primary" size="small" icon="delete" v-on:click="deleteFn">删除</el-button>
  			</div>
  			<div class="data-list">
				<m-table-complex :tableDatas="tableDatalist" :queryTableDataUrl="urlPaths.queryList" :queryTableDataParms="conditionForm" :tableColumn="tableColumn"
					ref="tableChild" :goodsDatalist="goodsDatalist" :attributeDatalist="attributeDatalist" @select-rowidx-handler="handleCurrentChange">
				</m-table-complex>
			</div>
  		</el-col>
  		<!--<el-col :span="24">-->
  			<!--新增和修改 dialog-->
			<el-dialog :title="dialogTitle" v-if="dialogVisible" :visible.sync="dialogVisible" customClass="customStyle">
				<el-form :model="configform" ref="configform" :rules="rules" label-width="100px">
					<m-dialog-form-item v-for="column in tableColumn" :configform="configform" :columnInfo="column"
						:uploadImgAttr="uploadDatas" @linkBtn-handler="addAttrTypeFn">
					</m-dialog-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="closeDialog">取 消</el-button>
					<el-button type="primary" @click="saveSubmit">确 定</el-button>
				</div>
				
				
			</el-dialog>
			
			<!--新增属性 dialog-->
			<el-dialog :title="attrTypeDialogTitle" :visible.sync="attrTypeDialogVisible">
				<el-form :model="attrTypeConfigform" ref="attrTypeConfigform" :rules="rules" label-width="100px">
					<el-form-item v-for="(columnValue, columnKey) in attrTypeConfigform" :label="transAttrName(attrTypeTableColumn, columnKey)" v-if="isEditEnabled(attrTypeTableColumn, columnKey)">
						<el-col :span="12">
							<el-select v-if="isShowSelectList(attrTypeTableColumn, columnKey)" v-model="attrTypeConfigform[columnKey]" filterable placeholder="请选择">
								<el-option v-for="item in getSelectOption(columnKey)" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
							<el-input v-else style="width:100%" v-model="attrTypeConfigform[columnKey]"
								:clearable="true"></el-input>
						</el-col>
						<el-col :span="12">
							<el-button v-if="isAddTypeLink(attrTypeTableColumn, columnKey)" type="text" v-on:click="addAttrCategoryFn">找不到，新建一个标签</el-button>
						</el-col>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="attrTypeDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="attrTypeSaveSubmit">确 定</el-button>
				</div>
			</el-dialog>
			<!--新增属性类别 dialog-->
			<el-dialog :title="attrCategoryDialogTitle" :visible.sync="attrCategoryDialogVisible" append-to-body>
				<el-form :model="attrCategoryConfigform" ref="attrCategoryConfigform" :rules="rules" label-width="100px">
					<el-form-item v-for="(columnValue, columnKey) in attrCategoryConfigform" :label="transAttrName(attrCategoryTableColumn, columnKey)" v-if="isEditEnabled(attrCategoryTableColumn, columnKey)">
						<el-col :span="12">
							<el-input style="width:100%" v-model="attrCategoryConfigform[columnKey]" :clearable="true"></el-input>
						</el-col>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="attrCategoryDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="attrCategorySaveSubmit">确 定</el-button>
				</div>
			</el-dialog>
		<!--</el-col>-->
	</el-row>
</template>
<script>
	import {
		Message
	} from 'element-ui';
	import store from '../../store'
	export default {
		components:{},
		data() {
			return {
				tableDatalist:[],
				tableDataPage:[],
				goodsDatalist:[],
				attributeDatalist:[],
				attributeCategoryDatalist:[],
				conditionForm: { //查询过滤的条件
					goodsName:''
				},
				tableColumn:[ 
					{
						columnName:'id', //主键字段，修改和删除的依赖列
						columnLabel:'ID',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'goodsId',
						columnLabel:'产品名',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true, //是否在新增或修改对话框中显示该属性字段
						isInputSelectList:true,
						selectListData:[],
						dataQueryUrl:'goods/selectList'
					},
					{
						columnName:'attributeId',
						columnLabel:'属性名称',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
						isInputSelectList:true,
						isNewDialogLinkEnabled:true,
						selectListData:[],
						dataQueryUrl:'attribute/selectList'
					},
					{
						columnName:'value',
						columnLabel:'特性值',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
					}
				],
				attrTypeTableColumn:[
					{
						columnName:'id', //主键字段，修改和删除的依赖列
						columnLabel:'ID',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'name',
						columnLabel:'特性名称',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'attributeCategoryId',
						columnLabel:'属性类别',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
						isInputSelectList:true,
						isNewDialogLinkEnabled:true,
						selectListData:[],
						dataQueryUrl:'attributeCategory/selectList'
					},
					{
						columnName:'inputType',
						columnLabel:'inputType，默认为1',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'values',
						columnLabel:'values，默认为空',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'sortOrder',
						columnLabel:'排序顺序，默认为0',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true, //是否在新增或修改对话框中显示该属性字段
					}
				],
				attrCategoryTableColumn:[ 
					{
						columnName:'id', //主键字段，修改和删除的依赖列
						columnLabel:'ID',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'name',
						columnLabel:'属性类别名',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'enabled',
						columnLabel:'enabled默认为1',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
					}
				],
				urlPaths:{
					queryList:'goodsAttribute/listAll',
					delByKey:'goodsAttribute/delete',
					insert:'goodsAttribute/add',
					updateByKey:'goodsAttribute/update',
					goodsQueryList:'goods/selectList',
					attributeQueryList:'attribute/selectList',
					attributeAdd:'attribute/add',
					attributeCategoryQueryList:'attributeCategory/selectList',
					attributeCategoryAdd:'attributeCategory/add'
				},
				configform: {},
				attrTypeConfigform:{},
				attrCategoryConfigform:{},
				index: '',
				dialogVisible: false,
				dialogTitle:'新增',
				attrTypeDialogVisible: false,
				attrTypeDialogTitle:'新增属性标签',
				attrCategoryDialogVisible: false,
				attrCategoryDialogTitle:'新增属性类别标签',
				rules: {
				},
				currentRow: null,
				uploadImgs: {},
				uploadDatas:{
					clazz:'goodsAttribute',
					columnName:''
				},
				uploadFileList: []
			}
		}, 
		computed:{
			/**
			 * @author：01367604
			 * @function: 转换表中显示的属性值，将ID转换成名称
			 * @pramas: 
			 */
			tranColumnValue(columnName, columnValue){
				return function (columnName, columnValue){
//					console.log(columnName+ ': '+columnValue);
					var colElem;
					if (columnName === 'goodsId'){
						colElem = this.goodsDatalist.find((element) => (element.id == columnValue));
					} else if(columnName === 'attributeId'){
						colElem = this.attributeDatalist.find((element) => (element.id == columnValue));
					}
					if (colElem !=undefined && colElem.name !=undefined && colElem.name.length>0){
//						console.log(colElem);
						return colElem.name;
					} else {
						return columnValue;
					}
				}
			},
			/**
			 * @author：01367604
			 * @function: 转换新增和修改model框中显示的属性名称，将英文列名转换成中文描述
			 * @pramas: 
			 */
			transAttrName(colomnList, value){
				return function (colomnList, value){
					var resLabel;
					var colElem = colomnList.find((element) => (element.columnName == value))
					if (colElem.columnLabel != undefined && colElem.columnLabel.length>0){
						resLabel= colElem.columnLabel;
					} else {
						resLabel= colElem.columnName;
					}
					return this.tranColumnValue(colElem.columnName, resLabel);
				}
			},
			/**
			 * @author：yc
			 * @function: 新增和修改model框是否显示（编辑）某属性
			 * @pramas: 
			 */
			isEditEnabled(colomnList, value){
				return function (colomnList, value){
					var colElem = colomnList.find((element) => (element.columnName == value))
//					console.log(value + ": " + colElem.isModifyDialogEnabled);
					return colElem.isModifyDialogEnabled != undefined && colElem.isModifyDialogEnabled;
				}
			},
			/**
			 * @author：yc
			 * @function: 新增和修改model框中是否上传图片组件
			 * @pramas: 
			 */
			isShowUploadPic(colomnList, value){
				return function (colomnList, value){
					var colElem = colomnList.find((element) => (element.columnName == value))
//					console.log(value + ": " + colElem.isPicColumn);
					return colElem.isPicColumn != undefined && colElem.isPicColumn;
				}
			},
			/**
			 * @author：01367604
			 * @function: 新增和修改model框中显示下拉框
			 * @pramas: 
			 */
			isShowSelectList(colomnList, value){
				return function (colomnList, value){
					var colElem = colomnList.find((element) => (element.columnName == value))
					return colElem.isInputSelectList != undefined && colElem.isInputSelectList;
				}
			},
			/**
			 * @author：01367604
			 * @function: 新增和修改model框中下拉框数据获取
			 * @pramas: 
			 */
			getSelectOption(value){
				return function (value){
					if (value === 'attributeId'){
						return this.attributeDatalist;
					} else if (value === 'goodsId'){
						return this.goodsDatalist;
					} else if (value === 'attributeCategoryId'){
						return this.attributeCategoryDatalist;
					}
				}
			},
			/**
			 * @author：yc
			 * @function: 新增和修改model框中是否新增类别标签的链接地址
			 * @pramas: 
			 */
			isAddTypeLink(colomnList, value){
				return function (colomnList, value){
					var colElem = colomnList.find((element) => (element.columnName == value))
					return colElem.isNewDialogLinkEnabled != undefined && colElem.isNewDialogLinkEnabled;
				}
			}
		},
		beforeCreate(){
    	},
    	mounted() {
    		this.initData();
		},
		methods: {
			initData(){
    			this.queryAttributeCategoryData();
			},
			queryAttributeCategoryData(){
				/*查询接口*/
				this.$httpExt().get(this.urlPaths.attributeCategoryQueryList).then((response) => {
					var rows= response.rows;
					console.log('attributeCategory size:' + rows.length);
					for(let [index, item] of rows.entries()){
						item.index = index
					}
					this.attributeCategoryDatalist = rows;
//					console.log(this.specificationDatalist);
				},(response) => {
					Message({
						message: '服务器请求失败，请重试！',
						type: 'warning'
					});
				});
			},
			queryTableData(){
				this.$refs.tableChild.initData();
			},
			queryAttributeData(){
				/*查询产品属性下拉列表数据接口*/
				this.$httpExt().get(this.urlPaths.attributeQueryList).then((response) => {
					var rows= response.rows;
					console.log('attribute size:' + rows.length);
					this.attributeDatalist = rows;
	//					console.log(this.specificationDatalist);
				},(response) => {
					Message({
						message: '服务器请求失败，请重试！',
						type: 'warning'
					});
				});
			},
	   		queryAttributeCategoryData(){
	   			/*查询产品属性类别下拉列表数据接口*/
	   			this.$httpExt().get(this.urlPaths.attributeCategoryQueryList).then((response) => {
	   				var rows= response.rows;
	   				console.log('attributeCategory size:' + rows.length);
	   				this.attributeCategoryDatalist = rows;
	   //					console.log(this.specificationDatalist);
	   			},(response) => {
	   				Message({
	   					message: '服务器请求失败，请重试！',
	   					type: 'warning'
	   				});
	   			});
	   		},
			/*选择一条数据*/
			handleCurrentChange(val) {
				if(!val) {
					return
				}
				this.currentRow = val;
				this.index = val.index+''
//				console.log('this.currentRow ',this.currentRow);
//				console.log('this.index ',this.index);
			},
			/*新增*/
			addFn(){
				this.dialogVisible = true;
				this.dialogTitle='新增';
				this.setFormData();
			},
			/*编辑*/
			editFn(){
				if(this.index) {
					this.dialogVisible = true;
					this.dialogTitle='编辑';
					this.setFormData();
				}else{
					Message({
						message: '请选择一条进行操作！',
						type: 'warning'
					});
				}
			},
			setFormData(){
				var form ={};
				for(let col of this.tableColumn){
					if (this.dialogTitle=='新增'){
						if (col.defaultValue != undefined && col.defaultValue!=''){
							form[col.columnName] = col.defaultValue;
						} else {
							form[col.columnName] = '';
						}
					} else {
						form[col.columnName] = this.currentRow[col.columnName];
					}
				}
				this.configform = form;
//				this.queryBrandData();
			},
			/*删除*/
			deleteFn(){
				if(this.index) {
					this.$confirm('你确定要删除吗？', '删除提示', {
			          	confirmButtonText: '确定',
			          	cancelButtonText: '取消',
			          	type: 'warning'
			        }).then(() => {
			        	//调删除接口
			        	console.log(this.currentRow.id);
			        	this.$httpExt().get(this.urlPaths.delByKey, {
							id:this.currentRow.id
						}).then((response) => {
//							Message({
//								message: response.msg,
//								type: 'success'
//							});
							this.queryTableData();
						},(response) => {
							Message({
								message: '服务器请求失败，请重试！',
								type: 'warning'
							});
						});
			        });
				}else{
					Message({
						message: '请选择一条进行操作！',
						type: 'warning'
					});
				}
			},
			/*提交*/
			saveSubmit(){				
				var that = this;
				if(this.dialogTitle == '新增') {
//							that.configform.id = '';
					var url = this.urlPaths.insert;
				} else {
					var url = this.urlPaths.updateByKey;
				}
//				console.log(url);
				console.log(that.configform);
				this.$httpExt().post(url,that.configform).then((response) => {
					if(response.succ == 'ok') {
						that.queryTableData();
						that.dialogVisible = false;
					}
				}, (data) => {
					Message({
						message: data.msg ? data.msg : '服务器请求失败，请重试！',
						type: 'warning'
					});
				});
			},
			closeDialog(){
				this.dialogVisible = false;
			},
			/* 新增属性标签*/
			addAttrTypeFn(){
				this.attrTypeDialogVisible = true;
				var form ={};
				for(let col of this.attrTypeTableColumn){
					form[col.columnName] = '';
				}
				this.attrTypeConfigform = form;
			},
			/*提交*/
			attrTypeSaveSubmit(){				
				var that = this;
				this.$httpExt().post(this.urlPaths.attributeAdd,that.attrTypeConfigform).then((response) => {
					if(response.succ == 'ok') {
						that.attrTypeDialogVisible = false;
						that.queryAttributeData();
					}
				}, (data) => {
					Message({
						message: data.msg ? data.msg : '服务器请求失败，请重试！',
						type: 'warning'
					});
				});
//				this.tableDatalist.push(that.configform);
			},
			/* 新增属性类别标签*/
			addAttrCategoryFn(){
				this.attrCategoryDialogVisible = true;
				var form ={};
				for(let col of this.attrCategoryTableColumn){
					form[col.columnName] = '';
				}
				this.attrCategoryConfigform = form;
			},
			/*提交*/
			attrCategorySaveSubmit(){				
				var that = this;
				this.$httpExt().post(this.urlPaths.attributeCategoryAdd,that.attrCategoryConfigform).then((response) => {
					if(response.succ == 'ok') {
						that.attrCategoryDialogVisible = false;
						that.queryAttributeCategoryData();
					}
				}, (data) => {
					Message({
						message: data.msg ? data.msg : '服务器请求失败，请重试！',
						type: 'warning'
					});
				});
//				this.tableDatalist.push(that.configform);
			},
			handleReset() {
				this.newlyFormVisible = false
			},
			cascaderSelectHandleChange(value){
				console.log(value);
			},
			afterUploadHandler(data){
				// console.log(data);
				this.configform[data.columnName] = data.res;
			}
	    },
//	    watch:{
//　　　　　　　　example0(curVal,oldVal){
//　　　　　　　　　　console.log(curVal,oldVal);
//　　　　　　　　},
//		}
	}
</script>
<style>
.fl{
	float: left;
}
.goodsAttribute a{
	color: #20a0ff;
	text-decoration: none;
}

.customStyle{
    width:90%;
}

</style>